import React, { useEffect, useState } from 'react'
import { useRecoilState } from 'recoil';
import { designerState } from '../../../store'
import { EditOutlined, CloseOutlined } from '@ant-design/icons';
import './index.less'
// import { Tabs } from 'antd'

import pd from '../pd'

interface IProps {
  children?: any
}

export default function SelectedMenu (props: IProps) {
  const [isSetting, setIsSetting]       = useRecoilState(designerState.isSettingAtom)
  const [selectedNode, setSelectedNode] = useRecoilState(designerState.selectedNodeAtom);
  const [pageData, setPageData]         = useRecoilState(designerState.pageDataAtom);
  const [style, setStyle] = useState({})

  useEffect(() => {
    const menu: any = selectedNode?.menu
    // console.log('selectedMenu', selectedNode)
    if (menu && menu.left) {
      setStyle({
        left: menu.left - 242,
        top: menu.top - 120, // 去掉头部高度
        width: menu.width
      })
    }
  }, [selectedNode])

  /**
   * 删除选中节点及其子节点
   */
  const del = () => {
    if (selectedNode.meta.id) {
      pd(pageData, setPageData).deleteById(selectedNode.meta.id)

      // 删除当前节点后，重新设置默认节点
      if (pageData.length > 0) {
        setSelectedNode(pageData[0])
      } 
    }
    // setSelectedNode({})
    // if (selectedNode.meta.parent) {
    //   RecoilDataUtil(pageData, setPageData).delById(selectedNode.sid)
    // } else {
    //   RecoilDataUtil(pageData, setPageData).delByParentSid(selectedNode.sid)
    // }
    // setSelectedNode(null)
  }

  /**
   * 编辑选中节点
   */
  const edit = () => {
    setIsSetting(!isSetting)
  }

  return (
    <div style={ style } className='selected-menu'>
      <div className='selected-menu-btn' style={{display: selectedNode?.menu ? 'block' : 'none'}}>
        <EditOutlined onClick={ edit }  />
        <CloseOutlined onClick={ del }  />
      </div>
    </div>
  )
}